/*
 * @Author: Yhd
 * @Date: 2021-10-28 10:44:04
 * @LastEditTime: 2021-11-10 15:46:01
 * @LastEditors: Please set LastEditors
 * @Description: 输入格式处理
 * @FilePath: \app\src\directive\cleave.js
 */

import Cleave from "cleave.js";

export default {
    // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind: () => {},
    // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    inserted: (el, binding) => {
        let input = getInputDom(el);
        input.cleave = new Cleave(input, binding.value || {})
    },
    // 所在组件的 VNode 更新时调用 但是可能发生在其子 VNode 更新之前
    update: (el) => {
        const event = new Event('input', { // 自定义事件
            bubbles: true // 是否冒泡
            // cancelable: false // 是否取消默认事件
        });
        setTimeout(() => {
            let input = getInputDom(el);
            input.value = input.cleave.properties.result;
            input.dispatchEvent(event); // 触发自定义事件
        }, 100);
    }
}
/**
 * @description: 获取输入框dom节点
 * @param {*} dom
 * @return {*} 输入框节点信息
 */
function getInputDom(dom) {
    if (dom.tagName === 'INPUT') return dom;
    if (dom.className === 'el-input') return dom.querySelector('input');
    throw new Error('cleave指令仅用于el-input或input标签上')
}